<template>
  <div
    class="lecture-card"
    @click="
      $toPage(
        `/pages/djzh/activityDetail?indexCode=${row.indexCode}&isAudit=false`
      )
    "
  >
    <div class="card-left">
      <img :src="row.itemCoverUrl" alt="封面图片" />
    </div>
    <div class="card-right">
      <div class="card-header">
        <h3 class="title">{{ row.itemTitle }}</h3>
        <div class="points">+{{ row.itemScore }}积分</div>
      </div>
      <div class="info-list">
        <div class="info-item">
          <span class="label">讲师：</span>
          <span class="value">{{ row.itemPerson }}</span>
        </div>
        <div class="info-item">
          <span class="label">时间：</span>
          <span class="value">{{ row.itemStartTime }}</span>
        </div>
        <div class="info-item">
          <span class="label">地点：</span>
          <span class="value">{{ row.itemAddr }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LectureCard',
  props: {
    row: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
}
</script>

<style lang="scss" scoped>
.lecture-card {
  display: flex;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  background: $uni-color-success;
  margin-bottom: 12px;
  align-items: center;
  .card-left {
    width: 100px;
    height: 100px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .card-right {
    flex: 1;
    padding: 12px 12px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
      .title {
        font-size: 16px;
        color: $uni-color-primary;
        font-weight: bold;
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        width: 70%;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .points {
        color: #ffe9a3;
        font-size: 14px;
        position: absolute;
        top: 10px;
        right: 0px;
        background: url('../../../static/image/title-tag.png');
        background-size: 100% 100%;
        height: 24px;

        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 4px;
        padding-left: 20px;
      }
    }

    .info-list {
      .info-item {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 18px;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          color: #666;
          margin-right: 4px;
        }

        .value {
          color: #333;
        }
      }
    }
  }
}
</style>
